<template>
  <div class="BabyPersonal">
    <div class="BabyPersonal-Header">
      <div class="BabyPersonal-Header-Img">
        <img :src="userInfo.headerimg" alt="">
      </div>
      <div class="BabyPersonal-Header-Info">
        <div class="BabyPersonal-Header-Info-Name" @click="GotoInfo(2)">
          {{userInfo.name}}
        </div>
        <div class="BabyPersonal-Header-Info-Num">
          {{userInfo.phone}}
        </div>
      </div>
      <div class="BabyPersonal-Header-Money" @click="GotoCapital()">
        <span>资金明细</span>
      </div>

    </div>
    <div class="BabyPersonal-magin"></div>
    <div class="BabyPersonal-Body">
      <div class="BabyPersonal-Body-Item" v-for='(item,index) in ItemList' @click="GoToItem(item.stu)">
        <div class="Item-Left">
          <div class="Item-Left-Icon">
            <img :src="item.src" width="100%" />
          </div>
          <div class="Item-Left-Title">
            {{item.title}}
          </div>
        </div>
        <div class="Item-Right">
          <div class="Item-right-Num" v-if="index==0">

          </div>
          <div class="Item-right-Icon">
            <img src="static/img/My/go.png" width="100%" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    Indicator,
    Toast
  } from 'mint-ui';
  export default {
    name: 'BabyPersonal',
    data() {
      return {
        ItemList: [{
          'src': 'static/img/My/orders.png',
          'title': '幼儿园账单',
          'stu': 2
        }, {
          'src': 'static/img/My/plan.png',
          'title': '宝贝成长计划',
          'stu': 3
        }, {
          'src': 'static/img/My/tz.png',
          'title': '待处理事项',
          'stu': 4
        }, {
          'src': 'static/img/My/tuichu.png',
          'title': '退出登录',
          'stu': 5
        }],
        userInfo: ''
      }
    },
    created: function () {
      if (sessionStorage.getItem('userInfo') != null) {
        this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
      } else {
        this.getInfo();
      }

    },
    methods: {
      // 获取家长信息
      getInfo() {
        var vm = this;
        Indicator.open({
          text: '加载中...',
        });
        this.$ApiCom.Info().then(function (res) {
          Indicator.close();
          res.data.data.userInfo.headerimg = 'http://xyb.wujiaping.cn/' + res.data.data.userInfo.headerimg;
          vm.userInfo = res.data.data.userInfo;
          sessionStorage.setItem('userInfo', JSON.stringify(res.data.data.userInfo));
        }, function (err) {
          //   响应超时
          Indicator.close();
          Toast({
            message: '响应超时，请重试',
            duration: 1000
          });
          setTimeout(() => {
            Indicator.close();
            vm.$router.push({
              path: `/BabyPersonal`
            })
          }, 1000);
        })
      },
      GotoInfo(e) {
        this.$router.push({
          path: `CheckPerfectInfo/${e}`
        })
      },
      GotoCapital() {
        this.$router.push({
          path: `/Capital`
        })
      },
      GoToItem(e) {

        if (e == 2) {
          this.$router.push({
            path: `/Bill`
          })
        } else if (e == 3) {
          this.$router.push({
            path: `/BabyGrowth`
          })
        } else if (e == 1) {
          this.$router.push({
            path: `/Balance`
          })
        } else if (e == 4) {
          this.$router.push({
            path: `/MyPay`
          })
        } else if (e == 5) {
          var vm = this;
          Indicator.open({
            text: '注销中...',
          });
          this.$ApiCom.Logout().then(function (res) {
            Indicator.close();
            localStorage.clear();
            sessionStorage.clear();
            var Sid = localStorage.getItem('Sid');
              vm.$router.push({
                path: `/Login`
              })
          }, function () {
            Toast({
              message: '响应超时，请重试',
              duration: 1000
            });
          })
        }
      }
    }
  }

</script>

<style scoped>
  @import url("css/BabyPersonal.css");

</style>
